<template>
  <el-dialog
    :visible.sync="visible"
    width="60%"
    destroy-on-close
    title="上游依赖任务"
  >
    <div class="title">上游任务依赖列表</div>
    <el-button type="primary" class="new" @click="newHandle">新增</el-button>
    <div class="table-wrapper">
      <el-table ref="multipleTable" :data="data" stripe>
        <el-table-column type="index" width="50" label="序号" align="center" fixed="left"/>
        <el-table-column label="作业名称" prop="jobDesc" width="auto" align="center"/>
        <el-table-column label="所属任务分类" prop="belongToDir" width="auto" align="center"/>
        <el-table-column label="任务状态" prop="triggerStatus" width="auto" align="center">
          <template v-slot="scope">
            <el-tag :type="scope.row.triggerStatus == 1 ? 'success' : 'primary'">{{ scope.row.triggerStatus == 1 ? '启用' : '未启用' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="调度类型" prop="taskScheduleType" width="auto" align="center">
          <template v-slot="scope">
            <span>{{ scope.row.taskScheduleType == 'batch' ? '周期' : '实时' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="调度周期" prop="dependCycle" width="auto" align="center">
          <template v-slot="scope">
            <span>{{ getCycleLabel(scope.row.dependCycle) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="任务级别" prop="level" width="auto" align="center">
          <template v-slot="scope">
            <span>{{ 'T' + scope.row.level }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="action" label="操作" width="200" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                type="danger"
                @click="deleteRelation(scope.row.id)"
              >
                删除依赖关系
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :pagination="pagination"
        @page-size-changed="pageSizeChangeHandler"
        @page-changed="pageChangeHandler"
      />
    </div>
    <el-divider></el-divider>
    <div class="title">跨周期依赖</div>
    <div class="dependency-config">
      <el-radio class="option-item" v-model="form.spanCycleType" label="1">不依赖上一调度周期</el-radio>
      <el-radio class="option-item" v-model="form.spanCycleType" label="2">自依赖，等待上一调度周期成功，才能继续运行</el-radio>
      <el-radio class="option-item" v-model="form.spanCycleType" label="3">自依赖，等待上一调度周期结束，才能继续运行</el-radio>
    </div>
    <div class="btn-section">
      <el-button type="primary" @click="confirmHandle">保存</el-button>
      <el-button @click="visible=false">取消</el-button>
    </div>
    <Add ref="add" @addSuccess="addSuccessHandle"></Add>
  </el-dialog>
</template>

<script>
import BaseQueryPageForm from '@/views/common/mixins/BaseQueryPageForm'
import request from '../utils/request'
import Add from './add.vue'
import {getCycleLabel} from '../denpendencyView/util'

export default {
  // mixins: [BaseQueryPageForm],
  components: { Add },
  data() {
    return {
      pagination: {
        total: 0,
        pageSize: 10,
        page: 1,
      },
      form: {
        spanCycleType: '',
      },
      visible: false,
      data: [],
      info: {},
    }
  },
  methods: {
    init(info) {
      this.visible = true;
      this.form.spanCycleType = info.spanCycleType ?  info.spanCycleType + '' : '';
      this.info = info;
      this.requestData();
    },
    pageSizeChangeHandler(pageSize) {
      this.pagination.pageSize = pageSize
      this.pagination.page = 1
      this.requestData()
    },
    pageChangeHandler(page) {
      this.pagination.page = page
      this.requestData()
    },
    getCycleLabel,
    addSuccessHandle() {
      this.requestData();
    },
    deleteRelation(rowId) {
      this.$confirm('请确认是否删除此条依赖关系。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return request({
          url: '/xxlJob/relation/deleteRelation',
          method: 'post',
          data: [
            {
              lastNodeId: rowId,
              nextNodeId: this.info.xxlJobId
            }
          ]
        }).then(res=> {
          this.$message.success('操作成功');
          this.requestData();
        })
      })
    },
    requestData() {
      return request({
        url: '/xxlJob/relation/existPreRelationList',
        method: 'post',
        data: {
          page: this.pagination.page,
          pageSize: this.pagination.pageSize,
          filters: {
            id: this.info.xxlJobId
          }
        }
      }).then(res=> {
        this.data = res.list
        this.pagination.total = res.total;
      })
    },
    newHandle() {
      this.$refs.add.init(this.info.xxlJobId);
    },
    confirmHandle() {
      if(!this.form.spanCycleType) {
        this.$message.error('请先选择跨周期依赖方式');
        return;
      }
      return request({
        url: '/flink/taskDir/update',
        method: 'post',
        data: {
          id: this.info.id,
          spanCycleType: this.form.spanCycleType
        }
      }).then(res=> {
        this.$message.success('操作成功');
        this.$emit('relationChange');
        this.visible = false;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 16px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  &::before {
    content: '';
    background-color: #3c9afb;
    display: inline-block;
    width: 6px;
    height: 26px;
    margin-right: 10px;
  }
}
.dependency-config {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  .option-item {
    margin-bottom: 10px;
  }
}
.new {
  margin-bottom: 10px;
}
.btn-section {
  display: flex;
  justify-content: flex-end;
}

</style>
